<template>
	<view class="content">
		<!-- 頭部 -->
		<u-sticky>
			<view class="header paddinglr ffffff" :style="{paddingTop:systemBarHeight+'rpx'}"  @click="goBack">
				<view>
					<u-icon name="arrow-left" color="#000000" size="18"></u-icon>
				</view>
				<view class="searchInput flexleft">
					<view class="" @click.stop="jumpurl('/pages_index/scanywcode')">
						<u-icon name="scan" color="#ffb800" size="28"></u-icon>
					</view>
					<!-- <input class="margin_left1" type="text text_b" placeholder="請輸入搜索内容"
						placeholder-style="font-size: 24rpx;font-weight: 500;color: #B5B5B5;" v-model="name"
						confirm-type="search" disabled="" @confirm="init()"> -->
					<view class="margin_left1" type="text text_b">{{name}}</view>
				</view>
			</view>
			<!-- tab栏 -->
			<view class="ffffff">
				<!-- <u-tabs :list="tabList" @click="change" lineWidth="40rpx" lineColor="rgba(255, 184, 0, 1)" :activeStyle="{
				  color: '#000000',
				  fontWeight: 800,
				  transform: 'scale(1.05)'}" :inactiveStyle="{
				  color: '#666666',
				    transform: 'scale(1)'
				}"></u-tabs> -->
				<view class="mainpadding" style="padding-bottom: 0;">
					<view class="headertab flexbetween">
						<view :class="tabActive==0?'selects':''" @click="change(0)">店家</view>
						<view :class="tabActive==1?'selects':''" @click="change(1)">產品</view>
					</view>
				</view>

				<!-- 分類篩選 -->
				<view class="" v-show="tabActive==2">
					<view class="flexcenter">
						<view :class="ticketsType==0?'cateSelect margin_right2':'cateNoSelect margin_right2'"
							@click="ticketsType=0">電影票</view>
						<view :class="ticketsType==1?'cateSelect margin_right2':'cateNoSelect margin_right2'"
							@click="ticketsType=1">演唱會</view>
						<view :class="ticketsType==2?'cateSelect':'cateNoSelect'" @click="ticketsType=2">店家券</view>
					</view>
				</view>
				<!-- 篩選排序 -->
				<view class="margin_top flexbetween paddinglr" style="padding-bottom: 30rpx;">
					<!-- <view class="flexleft">
						<view :class="current==3?'color_ling text_a':'color_six text_a'" @click="screen()">分類篩選</view>
						<view class="screen" style="margin-left: 5rpx;"></view>
					</view> -->
					<view :class="current==0?'color_ling text_a':'color_six text_a'" @click="selectabzh()">
						綜合排序
					</view>
					<view class="flexleft">
						<view :class="current==1?'color_ling text_a':'color_six text_a'" @click="selectab()">銷量排序</view>
						<view>
							<view :class="type==1?'arrow_top_active':'arrow_top'"></view>
							<view :class="type==2?'arrow_bottom_active':'arrow_bottom'"></view>
						</view>
					</view>
					<view class="flexleft">
						<view :class="current==2?'color_ling text_a':'color_six text_a'" @click="selectabprice()">評分排序
						</view>
						<view>
							<view :class="type==3?'arrow_top_active':'arrow_top'"></view>
							<view :class="type==4?'arrow_bottom_active':'arrow_bottom'"></view>
						</view>
					</view>
					<view class="flexleft" v-if="tabActive==0">
						<view :class="current==3?'color_ling text_a':'color_six text_a'" @click="screenlalal()">距離
						</view>
						<view class="screen" style="margin-left: 5rpx;"></view>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 店鋪列表 -->
		<view v-show="tabActive==0">
			<view class="" v-for="item in list.data" :key="item.id">
				<view class="" v-if="item.is_ad">
					<view class="margin_top1">
						<u-swiper :list="item.images_text" radius="0" keyName="image_text" circular
							@click="zdyclick(item.url)" height="250"></u-swiper>
					</view>
				</view>
				<view class="margin_top1 mainpadding ffffff border12 boxshadow" v-else @click="goShopInfo(item.id,item)">
					<view class="">
						<view class="flexleft">
							<image class="shopImg margin_right2" :src="item.logoimage" mode=""></image>
							<view class="flexbetween">
								<view class="color_ling text_g margin_right5 word_wrap" style="font-weight: bold;">
									{{item.name}}
								</view>
								<view class="flexleft">
									<image @click.stop="daohang(item.address)" class="shopPhone margin_right3"
										src="/static/images/index/navigation.png" mode="">
									</image>
									<image class="shopPhone" src="/static/images/index/phoneShop.png" mode=""
										@click.stop="phone(item.shopmbl)"></image>
								</view>
							</view>
						</view>
						<view class="flex1">
							<view class="flexbetween margin_top1">
								<view class="">
									<view class="flexleft">
										<view class="flexleft margin_right3">
											<image class="shopItemImg" src="/static/images/index/score.png" mode=""></image>
											<view class="text_pee color_theme">{{item.score || 0}}分</view>
										</view>
										<view class="flexleft margin_right3">
											<image class="shopItemImg" src="/static/images/index/sales.png" mode=""></image>
											<view class="text_pee color_six">月售{{item.sale}}</view>
										</view>
										<view class="tradeBox margin_right1" v-if="item.is_yes==1 && item.is_yes1==1">營業中
										</view>
										<view class="serviceBox margin_right1"
											v-if="item.is_yes==0 || (item.is_yes==1 && item.is_yes1==0)">休息中</view>
										<image class="shopItemImg" src="/static/images/index/distance.png" mode="">
										</image>
										<view class="text_pee color_six">
											{{returnKmUnit(Number(item.distance))}}
										</view>
									</view>
									<!-- qxpay_xxtype全支付，yypay_status悠悠付，icash_status icash支付,jkpay_status街口，linepay_status Linepay -->
									<view class="flexleft flex_wrap">
										<view class="paytypeBox margin_top1" style="background-color: #f4ce30;color: #000;" v-if="item.qxpay_xxtype">全支付</view>
										<view class="paytypeBox margin_top1" style="background-color: #1faeb0;color: #fff;" v-if="item.icash_status">icash</view>
										<view class="paytypeBox margin_top1" style="background-color: #f8f6bd;color: #000;" v-if="item.yypay_status">悠悠付</view>
										<view class="paytypeBox margin_top1" style="background-color: #d81419;color: #fff;" v-if="item.jkpay_status">街口支付</view>
										<view class="paytypeBox margin_top1" style="background-color: #2f993e;color: #fff;" v-if="item.linepay_status">Line pay</view>
									</view>
								</view>
								
								<view class="flexcolumn" style="min-width: 110rpx;width: 110rpx;" @click.stop="shareShop(item)">
									<image src="@/static/images/index/hongbao.png" style="width: 100rpx;height: 100rpx;"
										mode="">
									</image>
									<view class="text_pee" style="color:#f92828;">分享領現金</view>
								</view>
							</view>
							<view class="">
								<text class="text_a margin_top1 margin_right2" style="display: inline-block;"
									v-for="ite in item.yy_time_text" :key="ite">{{ite}}</text>
							</view>
							<view class="flexleft margin_top1">
								<view class="serviceBox margin_right2" v-if="item.is_call">呼叫<br />服務</view>
								<view class="serviceBox margin_right2" v-if="item.is_pre">預約<br />排隊</view>
								<view class="serviceBox margin_right2" v-if="item.is_ws">外送<br />服務</view>
								<view class="couponBox margin_right2" v-if="item.is_hasrall">優惠券</view>
								<view class="text_a color_red" v-if="Number(item.deliveryfee)">
									{{item.deliveryfee || 0}}元<br />免運</view>
							</view>
						</view>
					</view>
					<view class="scrollBox margin_top1">
						<scroll-view class="white_nowrap" scroll-x>
							<view class="flexleft" style="align-items: flex-start;">
								<!-- 不可超過多展示8個 -->
								<view class="margin_right1" v-for="value in item.goods" :key="value.id">

									<image class="goodsImg" :src="value.logoimage" mode="" v-if="value.logoimage">
									</image>
									<image class="goodsImg" src="@/static/images/index/noImg.jpg" mode="" v-else>
									</image>
									<view class="color_ling text_pee margin_top1"
										style="width: 164rpx;white-space: pre-wrap;">
										{{value.name}}
									</view>
									<view class="color_ling text_e margin_top1">
										<text style="font-size: 12rpx;">$</text>
										{{value.new_price}}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="flexcenter" v-if="!list.data.length">
			<view class="placeholderimage" style="margin-top: 100rpx;"></view>
		</view>
		<!-- 產品列表 -->
		<view v-show="tabActive==1">
			<view class="flexbetween flex_wrap paddinglr">
				<view class="" v-for="item in list.data" :key="item.id">
					<view class="" v-if="item.is_ad">
						<view class="margin_top1">
							<u-swiper :list="item.images_text" style="width: 177px;" radius="0" keyName="image_text"
								circular @click="zdyclick(item.url)" height="250"></u-swiper>
						</view>
					</view>
					<view class="goodsBox margin_top1 ffffff padding_bottom" v-else @click="goGoodsInfo(item)">
						<view class="goodsImg">
							<image :src="item.logoimage" mode="" v-if="item.logoimage"></image>
							<image src="@/static/images/index/noImg.jpg" mode="" v-else></image>
						</view>
						<view class="text_a color_san margin_top1 paddinglr15" style="width: 330rpx;">{{item.name}}
						</view>
						<view class="xiaohui margin_top1 paddinglr15 yihang" style="width: 330rpx;">{{item.des}}</view>
						<view class="flexbetween margin_top1 paddinglr15">
							<view class="price">$ <text style="font-size: 30rpx;">{{item.new_price}}</text> </view>
							<image style="width: 34rpx;height: 34rpx;" src="/static/images/index/add_red.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 票券列表 -->
		<view class="paddinglr" v-show="tabActive==2">
			<view class="margin_top ffffff mainpadding flex border2" v-for="item in 4">
				<view class="ticketImg margin_right2">
					<image src="/static/goods.png" mode="aspectFill"></image>
				</view>
				<view class="justify_between_column" style="height: 228rpx;">
					<view class="text_weight color_ling" style="font-size: 34rpx;">八角笼中</view>
					<view class="text_five color_jiu" v-show="ticketsType==0">
						電影評分
						<text class="margin_left1" style="color: rgba(255, 0, 0, 1);">9.4</text>
					</view>
					<view class="text_five color_jiu" v-show="ticketsType==0">導演：王宝强</view>
					<view class="text_five color_jiu" v-show="ticketsType==0">類型：剧情</view>
					<view class="text_five color_jiu" v-show="ticketsType==0">主演：王宝强,王迅</view>
					<view class="text_five color_jiu" v-show="ticketsType==1||ticketsType==2">郑州奥体中心</view>
					<view class="ticketPrice" v-show="ticketsType==1||ticketsType==2">$89起</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				current: 0,
				type: 0, //綜合0，1銷量升，2銷量降，3評分升，4評分降
				systemBarHeight: "",
				tabActive: 0,
				tabList: [{
						name: "店家",
					}, {
						name: "產品",
					},
					// {
					// 	name: "票券",
					// },
				],
				ticketsType: 0, //票券類型 0電影票 1演唱會 2店家券
				page: 1,
				name: "", //商家名稱
				list: {
					data: []
				},
				pagedown: true,
				lat: "",
				lng: "",
				jl: 0
			}
		},
		onLoad(options) {
			this.systemBarHeight = getApp().globalData.systemBarHeight * 2 + 50
			if (options.name) {
				this.name = options.name
			}
			this.lat = options.lat
			this.lng = options.lng
			this.init()
		},
		methods: {
			shareShop(item) {
				let that = this
				let url = "https://opos.tw/pages_index/shopInfogoogle?id="
				if (item.is_goole != 1) {
					url = "https://opos.tw/pages_index/shopInfo?id="
				}
				if (navigator.share) {
					navigator.share({
							title: item.fy_share_title,
							text: item.fy_share_title,
							url: url + item.id + '&invite_code=' + uni.getStorageSync(
								"invite_code"), // 當前頁面 URL
						})
						.then(() => {
							console.log('分享成功');
						})
						.catch(error => {
							console.error('分享失敗', error);
						});
				} else {
					this.http.toast("當前瀏覽器不支持分享")
				}
			},
			screenlalal() { //距離
				if (this.current == 3 && this.jl == 1) {
					return false
				}
				this.current = 3
				this.jl = 1
				this.init()
			},
			goGoodsInfo(item) { //商品詳情
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.setStorageSync("shop_id", item.shop_id)
				uni.navigateTo({
					url: "/pages_index/goodsInfo?type=1&id=" + item.id
				})
			},
			init(isPage, page) {
				let _this = this;
				let url = '/api/index/getShoplist'
				if (!isPage) {
					this.list = {
						data: []
					}
				}
				uni.showLoading({
					title: "請稍後",
					mask: true,
				})
				let data = {
					name: this.name,
					sort: this.type,
					page: page || 1,
					lat: this.lat,
					lng: this.lng,
					data_type: 2
				}
				if (this.tabActive == 0) { //店鋪
					this.$set(data, "jl", this.jl)
					data.data_type = 2
				}
				if (this.tabActive == 1) { //產品
					url = '/api/index/getGoodslist'
					data.data_type = 3
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						if (this.tabActive == 0) {
							res.data.data.forEach(item => {
								this.$set(item, "jlkm", this.GetDistance({
									to_latitude: item.latitude,
									to_longitude: item.longitude,
									go_latitude: this.lat,
									go_longitude: this.lng,
								}))
								item.logoimage = this.imgUrl + item.logoimage
								if (!item.is_ad) {
									item.goods.forEach(value => {
										if (value.logoimage) {
											value.logoimage = this.imgUrl + value.logoimage
										}
									})
								}

							})
						} else if (this.tabActive == 1) { //產品
							res.data.data.forEach(item => {
								item.logoimage = this.imgUrl + item.logoimage
							})
						}
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},

			change(e) {
				console.log(e);
				this.tabActive = e
				this.init()
			},
			goShopInfo(id, item) { //店鋪詳情
				if (item.is_goole == 1) {
					uni.navigateTo({
						url: "/pages_index/shopInfogoogle?id=" + id
					})
					return false
				}
				uni.setStorageSync("shop_id", id)
				uni.navigateTo({
					url: "/pages_index/shopInfo?id=" + id
				})
			},
			selectabzh() { //綜合
				this.current = 0
				this.type = 0
				this.jl = 0
				this.init()
			},
			selectab() { //銷量
				this.current = 1
				this.type = this.type == 1 ? 2 : 1
				this.jl = 0
				this.init()
			},
			selectabprice() { //價格
				this.current = 2
				this.type = this.type == 3 ? 4 : 3
				this.jl = 0
				this.init()
			},
			screen() { //距離
				this.current = 3
				// this.sellnum=""
				// this.price=""
				this.type = 0
				// this.show=true
			},
			goBack() {
				uni.navigateBack(1)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.paytypeBox {
		padding: 5rpx 10rpx;
		margin-right: 10rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
	}
	::v-deep.u-sticky {
		top: 0 !important;
	}

	.header {
		display: flex;
		align-items: center;
	}

	.headertab {
		padding: 6rpx;
		box-sizing: border-box;
		background: #F1F1F1;
		border-radius: 72rpx 72rpx 72rpx 72rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;

		view {
			width: 45%;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			background: #F1F1F1;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #666666;
		}

		.selects {
			width: 45%;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			background: #feb800;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #333;
		}
	}

	.tradeBox {
		padding: 5rpx;
		text-align: center;
		background: rgba(14, 181, 0, 0.1);
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0EB500;
	}

	.searchInput {
		height: 70rpx;
		background: #F3F3F3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		margin-left: 30rpx;
		padding: 0 5rpx 0 30rpx;
		flex: 1;
	}

	::v-deep.u-tabs__wrapper__nav__item {
		flex: 1;
		white-space: nowrap;
	}

	::v-deep.u-tabs {
		padding: 0 20rpx;
	}

	// 店鋪
	.shopImg {
		width: 94rpx;
		height: 94rpx;
		min-width: 94rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.shopItemImg {
		width: 24rpx;
		height: 24rpx;
		margin-right: 5rpx;
	}

	.serviceBox {
		padding: 5rpx;
		text-align: center;
		background: rgba(255, 141, 1, 0.1);
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8D01;
	}

	.couponBox {
		padding: 5rpx;
		text-align: center;
		background: rgba(255, 0, 0, 0.1);
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}

	.scrollBox {
		.goodsImg {
			width: 164rpx;
			height: 164rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid #b4b4b4;
		}
	}

	// 分類篩選
	.cateNoSelect {
		padding: 5rpx 20rpx;
		line-height: 53rpx;
		line-height: 53rpx;
		text-align: center;
		background: #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.cateSelect {
		padding: 5rpx 20rpx;
		line-height: 53rpx;
		text-align: center;
		background: rgba(255, 92, 0, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #FF5C00;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	// 商品列表
	.goodsBox {
		border-radius: 11rpx 11rpx 0 0;

		.goodsImg {
			width: 330rpx;
			height: 330rpx;
			border-radius: 11rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.price {
			font-size: 24rpx;
			font-family: DIN Next LT Pro-Medium, DIN Next LT Pro;
			font-weight: 500;
			color: #FF0000;
		}
	}

	.ticketImg {
		width: 164rpx;
		height: 228rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ticketPrice {
		font-size: 40rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}
</style>